<template>
  <view>
    <u-navbar :is-back="false" title="饮食记录" :background="background" title-size="44" title-color="#000">
      <image src="https://s1.ax1x.com/2023/09/09/pP6rogP.png" mode="" class="date_icon" @click="showDate"></image>
    </u-navbar>
    <u-calendar v-model="isShow" :mode="mode" @change="change"></u-calendar>
    <!-- 三餐信息 -->
    <!-- 后期循环得到 -->
    <view class="sancan_info" id="info">
      <!-- 早餐 -->
      <view class="info_first">
        <!-- 标题 -->
        <view class="first_title">
          <!-- 左侧 -->
          <view class="first_left">
            <!-- 图标 -->
            <view class="first_left_pic">
              <image src="https://img.js.design/assets/img/641d2ea9cb964223d18c6044.png" mode=""></image>
            </view>
            <!-- 文字 -->
            <text> 早餐（建议375-450千卡）</text>
          </view>
          <view class="first_right" @click="goAdd(1)">
            <image src="https://s1.ax1x.com/2023/04/19/p9F3wNV.png" mode=""></image>
          </view>
        </view>
        <!-- 详情 -->
        <view class="info_detail">
          <text>菜品名称</text>
          <text>菜品信息</text>
          <text>就餐形式</text>
        </view>
        <!-- 详情主体 -->
        <view class="info_body">
          <view class="info_body_item">
            <view class="info_left">韭菜包子（韭菜259g）</view>
            <view class="info_center">
              <text>小麦面粉100g</text>
              <text>韭菜250g</text>
              <text>羊肉（肥瘦）均值）20g</text>
            </view>
            <view class="info_right">在家</view>
          </view>
          <view class="info_body_item">
            <view class="info_left">韭菜包子（韭菜259g）</view>
            <view class="info_center">
              <text>小麦面粉100g</text>
              <text>韭菜250g</text>
              <text>羊肉（肥瘦）均值）20g</text>
            </view>
            <view class="info_right">在家</view>
          </view>
        </view>
      </view>
      <!-- 午餐 -->
      <view class="info_first">
        <!-- 标题 -->
        <view class="first_title">
          <!-- 左侧 -->
          <view class="first_left">
            <!-- 图标 -->
            <view class="first_left_pic wu">
              <image src="https://img.js.design/assets/img/641d3079d51f3246b0121f7e.png" mode=""></image>
            </view>
            <!-- 文字 -->
            <text> 午餐（建议375-450千卡）</text>
          </view>
          <view class="first_right" @click="goAdd(2)">
            <image src="https://s1.ax1x.com/2023/04/19/p9F3wNV.png" mode=""></image>
          </view>
        </view>
        <!-- 详情 -->
        <view class="info_detail">
          <text>菜品名称</text>
          <text>菜品信息</text>
          <text>就餐形式</text>
        </view>
        <!-- 详情主体 -->
        <view class="info_body">
          <view class="info_body_item">
            <view class="info_left">韭菜包子（韭菜259g）</view>
            <view class="info_center">
              <text>小麦面粉100g</text>
              <text>韭菜250g</text>
              <text>羊肉（肥瘦）均值）20g</text>
            </view>
            <view class="info_right">在家</view>
          </view>
          <view class="info_body_item">
            <view class="info_left">韭菜包子（韭菜259g）</view>
            <view class="info_center">
              <text>小麦面粉100g</text>
              <text>韭菜250g</text>
              <text>羊肉（肥瘦）均值）20g</text>
            </view>
            <view class="info_right">在家</view>
          </view>
        </view>
      </view>
      <!-- 晚餐 -->
      <view class="info_first">
        <!-- 标题 -->
        <view class="first_title">
          <!-- 左侧 -->
          <view class="first_left">
            <!-- 图标 -->
            <view class="first_left_pic">
              <image src="https://img.js.design/assets/img/641d2ea9cb964223d18c6044.png" mode=""></image>
            </view>
            <!-- 文字 -->
            <text> 晚餐（建议375-450千卡）</text>
          </view>
          <view class="first_right" @click="goAdd(3)">
            <image src="https://s1.ax1x.com/2023/04/19/p9F3wNV.png" mode=""></image>
          </view>
        </view>
        <!-- 详情 -->
        <view class="info_detail">
          <text>菜品名称</text>
          <text>菜品信息</text>
          <text>就餐形式</text>
        </view>
        <!-- 详情主体 -->
        <view class="info_body">
          <view class="info_body_item">
            <view class="info_left">韭菜包子（韭菜259g）</view>
            <view class="info_center">
              <text>小麦面粉100g</text>
              <text>韭菜250g</text>
              <text>羊肉（肥瘦）均值）20g</text>
            </view>
            <view class="info_right">在家</view>
          </view>
          <view class="info_body_item">
            <view class="info_left">韭菜包子（韭菜259g）</view>
            <view class="info_center">
              <text>小麦面粉100g</text>
              <text>韭菜250g</text>
              <text>羊肉（肥瘦）均值）20g</text>
            </view>
            <view class="info_right">在家</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  // import demodata from '@/mockdata/demodata.json';
  export default {
    data() {
      return {
        // 自定义导航栏背景
        background: {
          backgroundColor: '#F5C39F',
        },
        // 控制日历是否显示
        isShow: false,
        chartsDataPie1: {},
        foodsName: '西红柿炒鸡蛋', // 接收添加餐品的名称
        foodsList: [] // 存放食材的数组
      }
    },

    // 监听 foodsName 是否发生变化，若发生变化，则发起请求更新三餐信息
    watch: {
      foodsName: function(nvalue, ovalue) {
        const data = {
          name: nvalue
        }
      }
    },
    methods: {
      // 显示日历
      showDate() {
        this.isShow = true
      },
      // 获取选中日期
      change(e){
        console.log(11);
        console.log(e);
      },
      /**
       * 跳转到添加饮食
       */
      goAdd(id) {
        uni.navigateTo({
          url: `../../subpkg/jilu/add/add?qid=${id}`,
        })
      },

      // 页面一挂载完成，向服务器发请求获取三餐信息（mounted 中调用该方法）
      async getSanCanInfo() {
        const data = {
          name: this.foodsName
        }
        try {
          const {
            data: res
          } = await uni.$http.post('/three_meals/get_foodstuff', data)
          console.log(res);
          if (res.status == 0) {
            // 数据处理
            this.foodsList = res.data
            console.log(this.foodsList);
          }
        } catch (e) {
          uni.$showMsg('网络异常，请稍后重试')
        }
      },
    },
    // 
    onLoad() {
      this.getSanCanInfo()
      const res = uni.getSystemInfoSync();
      console.log(res, 11);
      let aa = document.getElementById('info')
      console.log(aa,1222);
    }
  }
</script>

<style lang="scss">
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  page {
    // background-color: rgba(245, 195, 159, 1);
  }

  .date_icon {
    width: 50rpx;
    height: 50rpx;
    margin-left: 30rpx;
  }

  // 三餐信息
  .sancan_info {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    padding-bottom: 30rpx;
    border-top-left-radius: 48rpx;
    border-top-right-radius: 48rpx;
    background: rgb(255, 255, 255);

    .info_first {

      // 标题
      .first_title {
        display: flex;
        justify-content: space-between;
        width: 626rpx;
        margin-top: 56rpx;

        .first_left {
          display: flex;

          .first_left_pic {
            width: 40rpx;
            height: 40rpx;
            text-align: center;
            line-height: 40rpx;
            border-radius: 16rpx;
            background: linear-gradient(180deg, rgba(252, 200, 68, 1) 0%, rgba(252, 200, 68, 0.57) 100%);

            image {
              width: 28rpx;
              height: 28rpx;
            }
          }

          .wu {
            background: linear-gradient(180deg, rgba(0, 218, 159, 1) 0%, rgba(1, 219, 165, 0.47) 100%);
          }

          text {
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(62, 34, 22, 1);
            margin-left: 5rpx;
          }
        }

        // 标题右侧（加号）
        .first_right {
          width: 40rpx;
          height: 40rpx;
          text-align: center;
          line-height: 40rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }

      // 详情
      .info_detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 626rpx;
        height: 50rpx;
        padding: 0 22rpx;
        font-size: 24rpx;
        font-weight: 400;
        margin-top: 28rpx;
        color: rgba(255, 255, 255, 1);
        background: rgba(255, 121, 83, 1);
      }

      // 详情主体
      .info_body {
        width: 626rpx;
        height: 256rpx;
        border: 0.5px solid rgba(255, 121, 83, 1);
        border-top: none;
        padding: 20rpx 0;

        .info_body_item {
          display: flex;
          justify-content: space-between;
          font-size: 24rpx;
          font-weight: 400;
          color: rgba(62, 34, 22, 1);

          .info_left {
            width: 150rpx;
            height: 98rpx;

          }

          .info_center {
            display: flex;
            flex-direction: column;
            width: 306rpx;
            height: 98rpx;
            padding: 0 10rpx;
            // background-color: skyblue;
          }

          .info_right {
            width: 120rpx;
            height: 98rpx;
          }
        }

        .info_body_item:nth-child(even) {
          margin-top: 20rpx;
        }
      }
    }
  }
</style>
